<template>
<div class="updata-lipei">
  <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/saleSystem' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>理赔管理</el-breadcrumb-item>
      <el-breadcrumb-item>理赔修改</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 修改信息 -->
   <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="客户姓名">
    <el-input v-model="form.clientName" disabled></el-input>
  </el-form-item>
  <el-form-item label="所购保险">
    <el-input v-model="form.insuranceName" disabled></el-input>
  </el-form-item>
  <el-form-item label="保险价格">
    <el-input v-model="form.insurancePirce" disabled></el-input>
  </el-form-item>
  <el-form-item label="保险期限">
    <el-input v-model="form.timeLength" disabled ></el-input>
  </el-form-item>
  <el-form-item label="理赔描述">
    <el-input v-model="form.reason"></el-input>
  </el-form-item>
  <el-form-item label="理赔金额">
    <el-input v-model="form.payment"></el-input>
  </el-form-item>
  <el-form-item label="受理状态">
    <el-radio-group v-model="form.status">
      <el-radio label="受理成功"></el-radio>
      <el-radio label="未受理"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="理赔凭证">
    
     <!-- 凭证上传 -->
      <el-upload
        class="avatar-uploader"
        action="http://localhost:3000/images/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img
          v-if="form.imgname  && !isChange"
          :src="'http://localhost:3000/images/'+form.imgname "
          class="avatar"
        />
        <img 
        v-else-if="form.imgname && isChange"
        :src="'http://localhost:3000/temp/'+form.imgname"
        class="avatar"
         alt />
        <img 
        v-else
         src="http://localhost:3000/images/lipei.png"
        class="avatar"
         alt />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <!-- 凭证上传 -->

  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">确定修改</el-button>
  </el-form-item>
</el-form>
</div>
 
</template>

<script>
import {createNamespacedHelpers} from "vuex";
const {mapActions} = createNamespacedHelpers("lipei");
export default {
  data() {
      return {
        //图片改变状态值
        isChange: false,
        form: {
          name: '',
          imgname:'',
        }
      }
    },
  async created(){
    const _id = this.$route.params._id;
    const {data} = await this.getUpdataOneAsync(_id);
    console.log(data[0]);
    this.form = data[0];
  },
  methods:{
    ...mapActions(["getUpdataOneAsync","sureUpdataOneAsync"]),
    async onSubmit() {
        // console.log('submit!');
        const data = await this.sureUpdataOneAsync(this.form);
        if(data.status){
          this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.$router.push('/Lipeilist');
        }else{
          this.$message.error('修改失败');
        }
      },

      //上传修改图片
      handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      if (res.status) {
        this.form.imgname = res.data;
        this.isChange = true;
        // console.log(this.form.imgname);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
}
</script>

<style>
.updata-lipei{
  width: 400px;
  margin: 0 auto;
}
  .avatar-uploader .el-upload {
  border: 1px dashed #ffffff;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #ddd9d9;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>